import { Image, Text, View } from "@tarojs/components";
import React, { Component } from "react"
import { connect } from 'react-redux'
import { URL_EXCHANGEBATTERYORDERS, URL_RENTCARORDERS } from "../../constants/SystemConstants";
import { WXRequest } from "../../utils/WXRequest";
import { findCabinets, getCabinets } from "../../actions/cabinets";
import { setCabinetId, setLocationVisible } from "../../actions/global";
import { locationUpdate } from "../../actions/location";
import { loginWXMP, refershToken } from "../../actions/login";
import { getToken, getUser, setUser } from "../../actions/user";
import { AtIcon } from "taro-ui";
import moment from "moment";

import './RentCarOrder.scss'


class RentCarOrder extends Component {
  state = {
    ExchangeBatteryOrderList: []
  }

  componentDidMount () {
    this.getExchangeBatteryOrder()
  }

  getExchangeBatteryOrder () {
    WXRequest(URL_RENTCARORDERS, 'GET', {}).then(res => {
      this.setState({
        ExchangeBatteryOrderList : res.data
      })
    })
  }
  
  render () {
    const batteryImg = require('../../images/battery.png')
    let OrderList = this.state.ExchangeBatteryOrderList.map((item, idex) => {
      const beginTime = moment(item.beginTime).format('YYYY-MM-DD HH:mm:ss')
      let status = '未支付'
      const statusCode = parseInt(item.status)
      switch(parseInt(item.status)) {
        case 0:
          status = '租用中'
          break
        case 1:
          status = '已结束'
          break
        case 2:
          status = '已归还'
          break
      }
      return (
        <View className='order-item'>
          <View className='item-left'>
            <View className='left-header'>
              <AtIcon prefixClass='icon' value='shandian' color='#6190E8' size='24'></AtIcon>
              <View className='header-order'>
                {beginTime}
              </View>
            </View>
            <View className='main'>
              <View className='main-left'>
                <Image style='width: 72px; height: 72px;' src='https://aixiang.oss-cn-shanghai.aliyuncs.com/33311608727759_.pic_hd.jpg'>
                </Image>
                <View>
                  <Text>
                    车辆编号
                  </Text>
                  <Text>
                    {item.scooter.id}
                  </Text>
                </View>
              </View>
              <View className='main-right'>
                { status }
              </View>
              {/* <Image src={batteryImg}></Image> */}
            </View>
          </View>
          {/* <View className='item-right'>
            已完成
          </View> */}
        </View>
      )
    })
    return (
      <View className='order-container'>
        <View>
          {OrderList}
        </View>
      </View>
    )
  }
}

// 将 reducer 中的状态插入到组件的 props 中
// 下面是单个reducer的时候，多个的时候需要选传入哪个reducer
// const { test, count } = state
const mapStateToProps = (state) => ({
  user: state.user,
  login: state.login,
  cabinets: state.cabinets.cabinets,
  detailLogin: state.cabinets.detailLogin,
  cabinet: state.cabinets.cabinet,
  location: state.global.location
})

// 将 对应action 插入到组件的 props 中
const mapDispatchToProps = (dispatch) => ({
  getUser () {
    dispatch(getUser())
  },
  getToken () {
    dispatch(getToken())
  },
  setUser (user) {
    dispatch(setUser(user))
  },
  refershToken (token) {
    dispatch(refershToken(token))
  },
  toLogin () {
    dispatch(loginWXMP())
  },
  updateLocation() {
    dispatch(locationUpdate())
  },
  updateCabinets () {
    dispatch(findCabinets())
  },
  getCabinets (id) {
    dispatch(getCabinets(id))
  },
  setCabinetId (id) {
    dispatch(setCabinetId(id))
  },
  setLocationVisible (visible, type) {
    dispatch(setLocationVisible(visible, type))
  }
})

// 使用 connect 高阶组件对 Counter 进行包裹
export default connect(mapStateToProps, mapDispatchToProps)(RentCarOrder)